<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/resouces/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/resouces/layuiadmin/style/admin.css" media="all">
    <link id="layuicss-layer" rel="stylesheet" href="http://localhost/layuiadmin/layui/css/modules/layer/default/layer.css?v=3.1.1" media="all">
    <script src="/static/resouces/layuiadmin/layui/layui.js?t=1"></script>
    <script>
        layui.config({
            base: '/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'console']);
    </script>
    <style>
        html{
            overflow-x: hidden;
        }
        ::-webkit-scrollbar{
            /*滚动条整体样式*/
            width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
        }
        ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            background   : #ededed;
        }
        ::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 5px;
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            background   : #3ad183;
        }
        .slide{
            background-repeat: no-repeat;
            background-size: cover;
        }
        .layui-panel:hover{
            opacity: 0.9;
        }
        .bg{
            background-image: url("/static/resouces/jquery/img/2.jpg");
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="layui-carousel" id="slideshow">
        <div carousel-item style="position: fixed">
            <div class="slide" style="background-image: url('/static/resouces/jquery/img/1.jpg')"></div>
            <div class="slide" style="background-image: url('/static/resouces/jquery/img/2.jpg')"></div>
            <div class="slide" style="background-image: url('/static/resouces/jquery/img/3.jpg')"></div>
            <div class="slide" style="background-image: url('/static/resouces/jquery/img/4.jpg')"></div>
            <div class="slide" style="background-image: url('/static/resouces/jquery/img/5.jpg')"></div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">相册管理</div>
            <div class="layui-card-body">
                <div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
                    <div carousel-item="">
                        <ul class="layui-row layui-col-space10 layui-this">
                            <li class="layui-col-xs6">
                                <a lay-href="/page/manage/addAlbum" lay-text="创建相册" class="layadmin-backlog-body">
                                    <h3>创建相册</h3>
                                    <p><cite id="albums">0</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs6">
                                <a lay-href="/page/manage/showAlbum" lay-text="分配相册" class="layadmin-backlog-body">
                                    <h3>分配相册</h3>
                                    <p><cite>0</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs6">
                                <a lay-href="template/goodslist.html" lay-text="私有相册" class="layadmin-backlog-body">
                                    <h3>私有相册</h3>
                                    <p><cite>0</cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs6">
                                <a href="javascript:;" onclick="layer.tips('未来再添', this, {tips: 3});" class="layadmin-backlog-body">
                                    <h3>更多</h3>
                                    <p><cite>0</cite></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="layui-carousel-ind">
                        <ul><li class="layui-this"></li></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        layui.use(['carousel','element'], function(){
            var $ = layui.jquery,
                carousel = layui.carousel,
                element = layui.element;
            //建造实例
            carousel.render({
                elem: '#slideshow'
                ,width: '100%' //设置容器宽度
                ,height: '400px'
                ,autoplay:true
                ,interval:3000
                ,indicator:'inner'
                ,anim:'default'
                ,arrow:'hover'
            });

            $.ajax({
                url:'/api/admin/allalbums',
                type:'GET',
                datatype: 'json',
                success: function (res) {
                    if (res.code===0){
                        $("#albums").html(res.data.length);
                    }
                }
            });
        });
    </script>
</body>
</html>
